import React from 'react';
import {View, FlatList, StyleSheet, Text, Platform} from 'react-native';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as serviceActionCreator from '../../actions/service-actions';
import {formatDate, getRealSize} from '../../utils';
import Separator from '../../components/separator';
import _ from 'lodash';
import {LoadingStatus} from '../../reducers/app-state';
import {I18n} from '../../reducers/intl';

class ServiceRecordScreen extends React.PureComponent {
  static navigationOptions = () => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: I18n.t('page.title.serviceRecord'),
  });

  state = {page: 1};

  componentDidMount() {
    const {serviceActions} = this.props;
    serviceActions.loadChargeRecord(1);
  }

  render() {
    const {
      serviceState: {chargeRecord = {}},
      serviceActions,
      appState,
    } = this.props;
    const {page} = this.state;
    const data = Object.values(chargeRecord);
    return (
      <View>
        <FlatList
          data={data}
          refreshing={appState.loading === LoadingStatus.PENDING}
          onRefresh={() => {
            this.setState({page: 1});
            serviceActions.loadChargeRecord(1);
          }}
          keyExtractor={item => item.charge_no}
          onEndReached={() => {
            const newPage = page + 1;
            this.setState({page: newPage});
            serviceActions.loadChargeRecord(newPage);
          }}
          onEndReachedThreshold={0.1}
          renderItem={({item}) => (
            <RecordCard
              chargeNo={item.charge_no}
              datetime={formatDate(item.created)}
              planName={_.get(item, 'plan.name', '')}
              invoiceName={_.get(item.invoice, 'invoice.name', '')}
            />
          )}
          ItemSeparatorComponent={() => <Separator />}
        />
      </View>
    );
  }
}

const RecordCard = props => {
  return (
    <View style={Styles.cardContainer}>
      <View style={Styles.cardHead}>
        <Text style={Styles.cardTitle} numberOfLines={1}>
          {I18n.t('order.props.no')}：{props.chargeNo}
        </Text>
        <Text style={Styles.cardDate}>{formatDate(props.datetime)}</Text>
      </View>
      <View style={Styles.cardContent}>
        <Text style={Styles.cardDesc}>
          {I18n.t('form.label.serviceName', {planName: props.planName})}
        </Text>
        <Text style={Styles.cardDesc}>{props.invoiceName}</Text>
      </View>
    </View>
  );
};

const mapStateToProps = state => ({
  appState: state.appState,
  user: state.user,
  serviceState: state.serviceState,
});

const mapDispatchToProps = dispatch => ({
  serviceActions: bindActionCreators(serviceActionCreator, dispatch),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ServiceRecordScreen);

const Styles = StyleSheet.create({
  container: {
    // ...ThemeStyles.Color.background.white,
    // paddingHorizontal: getRealSize(15),
  },
  cardContainer: {
    backgroundColor: '#f7f7f7',
    borderRadius: getRealSize(8),
    paddingHorizontal: getRealSize(15),
    paddingVertical: getRealSize(12),
    marginHorizontal: getRealSize(15),
  },
  cardHead: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  cardTitle: {
    fontSize: getRealSize(14),
    fontWeight: 'bold',
    color: '#333333',
    flex: 1,
  },
  cardContent: {
    marginTop: getRealSize(15),
  },
  cardDate: {
    width: getRealSize(72),
    fontSize: getRealSize(12),
    color: '#757575',
    textAlign: 'right',
  },
  cardDesc: {
    fontSize: getRealSize(12),
    color: '#757575',
  },
});
